<div fxLayoutAlign="center">
  <mat-card>

    <h3 translate>TITLE_CHANGE_PASSWORD</h3>

    <div class="form-container">

      <div class="confirmation" [hidden]="!(confirmation && !passwordControl.dirty && !newPasswordControl.dirty && !repeatNewPasswordControl.dirty)">{{ confirmation }}</div>

      <div class="error" [hidden]="!(error && !passwordControl.dirty && !newPasswordControl.dirty && !repeatNewPasswordControl.dirty)">{{ error }}</div>

      <mat-form-field appearance="outline">
        <mat-label translate>LABEL_CURRENT_PASSWORD</mat-label>
        <input id="currentPassword" [formControl]="passwordControl" type="password" matInput>
        <mat-error *ngIf="passwordControl.invalid" translate>MANDATORY_CURRENT_PASSWORD</mat-error>
      </mat-form-field>

      <mat-form-field appearance="outline">
        <mat-label translate>LABEL_NEW_PASSWORD</mat-label>
        <input id="newPassword" [formControl]="newPasswordControl" type="password" matInput>
        <mat-error *ngIf="newPasswordControl?.invalid && newPasswordControl?.errors.required" translate>MANDATORY_NEW_PASSWORD</mat-error>
        <mat-error *ngIf="newPasswordControl?.invalid && (newPasswordControl?.errors.minlength || newPasswordControl?.errors.maxlength)" translate [translateParams]="{length: '5-20'}">INVALID_PASSWORD_LENGTH</mat-error>
      </mat-form-field>

      <mat-form-field appearance="outline">
        <mat-label translate>LABEL_REPEAT_NEW_PASSWORD</mat-label>
        <input id="newPasswordRepeat" [formControl]="repeatNewPasswordControl" type="password" matInput>
        <mat-error *ngIf="repeatNewPasswordControl.invalid" translate>MANDATORY_PASSWORD_REPEAT</mat-error>
      </mat-form-field>

    </div>

    <button id="changeButton" [disabled]="passwordControl.invalid || newPasswordControl.invalid || repeatNewPasswordControl.invalid" mat-raised-button color="primary" (click)="changePassword()"><i class="fas fa-save fa-lg"></i> {{'BTN_CHANGE' | translate}}</button>

  </mat-card>
</div>
